import { useEffect, useRef } from "react";
import styles from "@/styles/Root.module.css";
import DatabaseIcon from "@/assets/Database.svg";
import FolderIcon from "@/assets/Folder_send.svg";
import ChartIcon from "@/assets/Chart_alt.svg";
import Logo from "@/assets/logo.svg";
import DataEngine from "@/assets/DataEngine.svg";
import { ConfigProvider } from "antd";
import zh_CN from "antd/lib/locale/zh_CN";
import { Outlet, useLocation, useNavigate } from "react-router-dom";

const menuItems = [
  {
    text: "图像数据生成",
    icon: DatabaseIcon,
    target: "/datasets",
  },
  {
    text: "目标识别测试",
    icon: FolderIcon,
    target: "/validation",
  },
  {
    text: "可信评估结果",
    icon: ChartIcon,
    target: "/evaluation",
  },
];

export default function Root() {
  const ref = useRef<HTMLDivElement>(null);
  const location = useLocation();
  const navigate = useNavigate();
  // 设置计时器
  useEffect(() => {
    navigate("/datasets");
    const it = setInterval(() => {
      const now = new Date();
      const year = now.getFullYear();
      const month = now.getMonth() + 1;
      const date = now.getDate();
      const hour = now.getHours().toString().padStart(2, "0");
      const min = now.getMinutes().toString().padStart(2, "0");
      const sec = now.getSeconds().toString().padStart(2, "0");
      ref.current!.textContent = `${year}年${month}月${date}日 ${hour}:${min}:${sec}`;
    }, 1000);
    return () => {
      clearInterval(it);
    };
  }, [navigate]);
  return (
    <div className={styles.page}>
      <header className={styles.header}>
        <div
          className={styles.logo}
          onClick={() => {
            navigate("/datasets");
          }}
        >
          <img alt="" width="36" height="36" src={Logo}></img>
          <img
            alt=""
            width="140"
            style={{ aspectRatio: 5.4 }}
            src={DataEngine}
          ></img>
        </div>
        <div className={`${styles.title}`}>目标识别可信评估系统</div>
        <div ref={ref} className={styles.tools}></div>
      </header>
      <div className={styles.container}>
        <nav className={styles.aside}>
          <ul className={styles.menu}>
            {menuItems.map((item) => {
              return (
                <li
                  key={item.target}
                  className={`${styles.menuItem} ${
                    item.target === location.pathname ? styles.active : ""
                  } `}
                  onClick={() => {
                    navigate(item.target);
                  }}
                >
                  <img alt="" src={item.icon}></img>
                  {item.text}
                </li>
              );
            })}
          </ul>
        </nav>
        <ConfigProvider locale={zh_CN}>
          <main className={styles.main}>
            <Outlet></Outlet>
          </main>
        </ConfigProvider>
      </div>
    </div>
  );
}
